@extends('front.layout')
@section('title')
    Citrulluss
@endsection
@section('content')

    <div class="container portfolio center-align">
        <h5>&nbsp;</h5>

        <h5>Citrulluss Blog</h5>
        <h6>VISUAL DESIGN •  VECTORS  • &nbsp;ILLUSTRATIONS  •  CODE </h6>
        <h5>&nbsp;</h5>
    </div>


    {{--<div class="carousel carousel-slider center"  data-indicators="true">--}}

        {{--<div class="carousel-item green white-text" href="#one!">--}}
            {{--<h2>与喜欢的文章</h2>--}}
            {{--<p class="white-text">不期而遇</p>--}}
        {{--</div>--}}

        {{--<div class="carousel-item red white-text" href="#three!">--}}
            {{--<h2>看得越多</h2>--}}
            {{--<p class="white-text">越想看更多</p>--}}
        {{--</div>--}}
        {{--<div class="carousel-item blue white-text" href="#four!">--}}
            {{--<h2>停下来</h2>--}}
            {{--<p class="white-text">享受美</p>--}}
        {{--</div>--}}
    {{--</div>--}}
    <div class="slider">
        <ul class="slides">
            <li>
                <img src="https://i.loli.net/2017/12/12/5a2f7d0fc5b13.jpg"> <!-- random image -->
                <div class="caption center-align">
                    <h5>“简单是稳定的前提。”</h5>
                    <h3 class="light grey-text text-lighten-5">— Edsger Dijkstra</h3>
                </div>
            </li>
            <li>
                <img src="https://i.loli.net/2017/12/12/5a2f7c1b36c31.jpg"> <!-- random image -->
                <div class="caption left-align">
                    <h5>“当你试图解决一个你不理解的问题时，复杂化就产成了。”</h5>
                    <h3 class="light grey-text text-lighten-3">——Andy Boothe</h3>
                </div>
            </li>
            <li>
                <img src="https://i.loli.net/2017/12/12/5a2f7d5f4990b.png"> <!-- random image -->
                <div class="caption right-align">
                    <h5>控制复杂性是计算机编程的本质。</h5>
                    <h3 class="light grey-text text-lighten-3">—— Brian Kernighan</h3>
                </div>
            </li>
            <li>
                <img src="https://i.loli.net/2017/12/12/5a2f7d0fab977.png"> <!-- random image -->
                <div class="caption center-align">
                    <h5>“好代码本身就是最好的文档。”</h5>
                    <h3 class="light grey-text text-lighten-3">——Steve McConnell</h3>
                </div>
            </li>
        </ul>
    </div>
    {{--<div id="index-banner" class="parallax-container" >--}}
        {{--<div class="carousel-item center" href="#one!">--}}
        {{--<h2>与喜欢的文章</h2>--}}
        {{--<p class="white-text">不期而遇</p>--}}
        {{--</div>--}}
        {{--<div class="parallax"><img src="http://stephaniejagiello.com/background1.jpg" style="bottom: -498.935px; display: block;""></div>--}}
    {{--</div>--}}

    {{--<div id="index-banner" class="parallax-container">--}}
        {{--<div class="section no-pad-bot">--}}
            {{--<div class="container" style="background:#000000">--}}
                {{--<br><br>--}}
                {{--<div class="row center">--}}

                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
        {{--<div class="parallax"><img src="http://stephaniejagiello.com/background1.jpg" alt="Unsplashed background img 2" style="bottom: -298.935px; display: block;"></div>--}}
    {{--</div>--}}


    <div id="ip" class="container">
        <div class="row">
            <div class="col m8 offset-l2">
                @foreach($posts as $post)

                    {{--<div class="post">--}}
                    {{--<h2 class="title"><a href="{{route('post.show',$post->id)}}">{{$post->title}}</a></h2>--}}
                    {{--<div>--}}
                    {{--<div class="chip z-depth-1 green   white-text">--}}
                    {{--{{date("M j Y",strtotime($post->created_at))}}--}}
                    {{--</div>--}}
                    {{--@foreach($post->tags as $tag)--}}

                    {{--<div class="chip z-depth-1 blue  hoverable">--}}
                    {{--<a href="{{route('tag.show',$tag->id)}}" class="white-text">{{$tag->tag}}</a>--}}
                    {{--</div>--}}

                    {{--@endforeach--}}

                    {{--</div>--}}
                    {{--<p>{{strlen($post->body)>100?mb_substr($post->body,0,100)."...":$post->body}}</p>--}}
                    {{--</div>--}}

                    <div class="card hoverable">

                            <span class="card-title">
                                 <div class="card-image">
                                <a href="{{route('post.show',$post->id)}}"><img src="@if($post->img){{$post->img}}@else https://i.loli.net/2017/12/12/5a2f7c9ad1295.jpg @endif" class="img-responsive center-block" width="60%" height="300px"></a>
                                      <span class="card-title"> {{$post->title}}</span>
                                    </div>
                                {{--<a href="http://www.hao123.com/" target="_blank" class="grey-text text-darken-4">--}}
                                {{--{{$post->title}}--}}
                                {{--</a>--}}
                            </span>
                        <div class="card-content">
                            <p>{{strlen($post->body)>100?mb_substr($post->body,0,100)."...":$post->body}}</p>
                        </div>


                        <div class="card-action">
                            <div class="chip z-depth-1 green   white-text">
                                {{date("M j Y",strtotime($post->created_at))}}
                            </div>
                            @foreach($post->tags as $tag)

                                <div class="chip z-depth-1 blue  hoverable">
                                    <a href="{{route('tag.show',$tag->id)}}" class="white-text">{{$tag->tag}}</a>
                                </div>

                            @endforeach
                            {{--<a href="javascript:void(0);" class="grey-text text-darken-2 right" onclick="AddBlockedUrl(this);">--}}
                            {{--<i class="material-icons tiny">public</i>--}}
                            {{--</a>--}}
                        </div>
                    </div>

                @endforeach

                {{--<div class="paginator-wrapper">--}}
                {{--@if($posts->currentPage()>1)--}}

                {{--<a class="left btn paginator blue  hoverable" href="{{$posts->previousPageUrl()}}">上一页</a>--}}
                {{--@endif--}}
                {{--@if($posts->currentPage()!=$posts->lastPage())--}}
                {{--<a class="right btn paginator blue  hoverable" href="{{$posts->nextPageUrl()}}">下一页</a>--}}
                {{--@endif--}}
                {{--</div>--}}

                {{ $posts->links('vendor.pagination.material') }}
            </div>
            {{--<div class="col m3 s12 offset-m1">--}}
            {{--<div class="panel">--}}
            {{--<ul>--}}
            {{--<li class="side-title">热门文章</li>--}}
            {{--@foreach($hot_posts as $hot_post)--}}
            {{--<li><a id="hot-post-text" href="{{route('post.show',$hot_post->id)}}">{{$hot_post->title}}</a></li>--}}
            {{--@endforeach--}}
            {{--</ul>--}}
            {{--</div>--}}
            {{--<div class="panel">--}}
            {{--<ul>--}}
            {{--<li class="side-title">标签</li>--}}
            {{--@foreach(\App\Tag::all() as $tag)--}}
            {{--<a href="{{route('tag.show',$tag->id)}}" class="chip blue  hoverable white-text">{{$tag->tag}}</a>--}}
            {{--@endforeach--}}
            {{--</ul>--}}
            {{--</div>--}}
            {{--<div class="panel">--}}
            {{--<ul>--}}
            {{--<li class="side-title">最新评论</li>--}}
            {{--@foreach(\App\Comment::orderBy('created_at','desc')->get()->slice(0,8) as $comment)--}}
            {{--<li ><a href="{{route('post.show',$comment->post->id)}}" id="comment-text">{{strlen($comment->comment)>16?mb_substr($comment->comment,0,16)."...":$comment->comment}}</a></li>--}}
            {{--@endforeach--}}
            {{--</ul>--}}
            {{--</div>--}}

            {{--</div>--}}
        </div>
    </div>



    {{--<div class="parallax-container" style="min-height: 200px;">--}}
        {{--<div class="parallax"><img src="http://stephaniejagiello.com/background1.jpg" style="bottom: -500.935px;"></div>--}}
    {{--</div>--}}


@endsection